<template>
    <div class="rwgl-dialog">
        <el-dialog
                :title="dialogOpType"
                :visible.sync="showRwglDialog"
                 width="30%"
                :before-close="handleClose">
            <el-form label-position="right" label-width="80px" >
                <el-form-item label="方案名称" class = 'el-form-item-margin'>
                    <el-input  placeholder="请输入方案名称"
                               v-model="formData.name"
                               clearable></el-input>
                </el-form-item>
                <el-form-item label="方案描述" class = 'el-form-item-margin'>
                    <el-input
                              type="textarea"
                              placeholder="请输入方案关键字"
                              v-model="formData.description"
                              clearable></el-input>
                </el-form-item>
                <el-form-item label="关键字" class = 'el-form-item-margin'>
                    <el-input placeholder="请输入方案关键字"
                              v-model="formData.keyWord"
                              clearable></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="saveData()">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
    import {baseServe} from "../../request/api"
    export default {
        name: "faglDialog",
        data(){
            return{
                formHead:
                    [{prop:'famc',label:'方案名称',width:''},
                        {prop:'fams',label:'方案描述',width:''},
                        {prop:'keyWord',label:'关键字',width:''}, ],
                //窗口打开的操作类型 新增/编辑
                optype:"",
                //表单数据
                formData:{
                    "description": "",
                    "keyWord": "",
                    "name": ""
                },
                //編輯時，帶過來的方案數據緩存
                FaDatas:{},
            }
        },
        props:['showRwglDialog','dialogOpType','FaData'],
        watch: {
            //监听prop，获取操作类别
            dialogOpType: function(newVal){
                this.optype = newVal;  //newVal即是chartData

            },
            FaData: function(newVal){
                this.FaDatas = newVal;  //newVal即是chartData
                this.formData.description = newVal.czdfams
                this.formData.keyWord = newVal.gjz
                this.formData.name = newVal.czdfamc

            }
        },
        mounted() {
            this.initData()
        },
        methods:{
            //初始化数据
            initData(){
            },
            //关闭弹窗
            handleClose(){
                this.$parent.rwglDialog = false;
            },
            //保存数据分发
            saveData(){
                let that = this;
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                if(this.optype === '新增方案'){
                    baseServe.addFa(this.formData).then(res =>{
                        if(res.data.success==true){
                            loading.close()
                            that.$message({
                                message: "新增方案成功",
                                type: 'success'
                            });
                            //更新數據
                           that.$parent.initData();
                           //關閉彈窗
                           that.$parent.rwglDialog = false;
                        }
                    }).catch(err=>{
                        loading.close()
                        console.error(err);
                    })
                }else{
                    let params = that.formData;
                    params.id = that.FaDatas.czdfaid;
                    baseServe.editeFa(params).then(res =>{
                        if(res.data.success==true){
                            loading.close()
                            that.$message({
                                message: "編輯方案成功",
                                type: 'success'
                            });
                            //更新數據
                            that.$parent.initData();
                            //關閉彈窗
                            that.$parent.rwglDialog = false;
                            that.$parent.$refs.multipleTable.clearSelection();
                        }
                    }).catch(err=>{
                        loading.close()
                        //關閉彈窗
                        that.$parent.rwglDialog = false;
                        that.$parent.$refs.multipleTable.clearSelection();
                        console.error(err);
                    })
                }
            }

        }
    }
</script>

<style>
    @import "../../assets/css/fagl/faDialog.css";
</style>
